<template>
  <view class="viewport">
    <web-view :src="url" :update-title="false"></web-view>
  </view>
</template>


<script lang="ts" setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'

  const url = ref<string>('')
  const viewerUrl = ref<string>('https://media.jiabl.net.cn/pdf-view/web/viewer.html')

  onLoad((options: any) => {
    if (options.filePath) {
      let filePath = options.filePath
      // if (plus.os.name === 'iOS') {
      //   url.value = filePath// encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
      // } else {
      //   url.value = viewerUrl.value + '?file=' + decodeURIComponent(filePath) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
      // }
      // #ifdef MP-TOUTIAO
      url.value = decodeURIComponent(filePath) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
      // #endif
      url.value = viewerUrl.value + '?file=' + decodeURIComponent(filePath) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
      // uni.downloadFile({
      //   url: filePath,
      //   success: function (res) {
      //     var localFilePath = res.tempFilePath;
      //     // #ifdef APP-PLUS
      //     localFilePath = plus.io.convertLocalFileSystemURL(localFilePath)
      //     // #endif
      //     url.value = viewerUrl.value + '?file=' + localFilePath // encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
      //   }
      // });
    } else {//无参就不预览PDF
      uni.showModal({//弹出提示
        title: '系统提示',//提示的标题
        content: '参数无效',//提示的内容
        confirmText: '返回',//取消按钮的文字，默认为"取消"
        showCancel: false,//是否显示取消按钮，默认为 true
        success: (res) => {
          if (res.confirm) {//监听弹窗返回按钮
            uni.navigateBack();//返回上一页
          }
        }
      });
    }

  })
</script>

<style lang="scss" scoped>
  .viewport {
    position: relative;
  }

  /* 底部工具栏 */
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc((var(--window-bottom)));
    z-index: 9999;
    background-color: #fff;
    height: 100rpx;
    padding: 0 20rpx;
    border-top: 1rpx solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: content-box;
  }
</style>
